<div class="phone_treeview fl" <#if (menuCode2!"")=="phoneimport">style="flex: 0 0 180px;display:none;"<#else>style="flex: 0 0 180px;"</#if>>
	<div class="treebox" height="100%">
		<div class="account-lefttree">
			<div class="account-allqx"><input type="checkbox" class="account-allbtn" id = "checkAll"><span class="allz" style="cursor:pointer;">全选</span></div>

		</div>
		<div class="phone_treeview_buttonarea">
			<input type="text" class="form-control" id="searchPhone" value="" placeholder="搜索" />
			<i id="searchPhoneButton"></i>
		</div>
		<div class="phone_treeview_scroll" id="bannerbigp">
			<ul id="treeDemo" class="ztree"></ul>
		</div>
	</div>
	<div class="tree-on"></div>
</div>
<script type="text/javascript">
    function refreshSize(){
        var totolHeight =  document.documentElement.clientHeight;
        var height = totolHeight - 158;
        // console.log(totolHeight + ' - ' + height);
        document.getElementById('bannerbigp').style.height = height+'px';
    };
    refreshSize();
    window.onresize = refreshSize;
    var _checkedPhone = new Array();
    var _baseData=[];
    var _data=[];
    /* 加载菜单信息 */
    var setting = {
        check:{
            enable:true,//是否显示radio/checkbox
            chkboxType:{  //表示父子节点的联动效果
                "Y" : "ps",
                "N" : "ps"
            },
            radioType: "all",
            chkStyle:"checkbox" //值为checkbox或者radio表示
        },
        callback:{
            onCheck:_zTreeOnCheck
        },
        data : {
            simpleData : {
                enable : true
            },
            showTitle : true, //是否显示节点title信息提示 默认为true

            key : {
                title : "title" //设置title提示信息对应的属性名称 也就是节点相关的某个属性
            }
        },
        view:{
            showIcon:false,
        }
    };
    $(function() {
        refreshTree();
        $('#checkAll').parent().on('click',function (e) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            var node = zTree.getNodes();
            var nodes = zTree.transformToArray(node);
            var checkNode = zTree.getCheckedNodes().length;
            //已选中的节点数小于总数 - 全选
            if (checkNode < nodes.length) {
                $('#checkAll').prop('checked', true);
                zTree.checkAllNodes(true);
            } else{
                $('#checkAll').prop('checked', false);
                zTree.checkAllNodes(false);
            }
            _checkedPhone = new Array();
            let nodess = zTree.getCheckedNodes(true);
            for(let i=0;i<nodess.length;i++){
            	if(!nodes[i].children) continue
            	for(let j = 0;j < nodes[i].children.length; j++){
                	let _phone = nodes[i].children[j].name;
    	            console.log(_phone)
                    if(_phone && "案件人员信息"!=_phone && _checkedPhone.indexOf(_phone)<0){
                        _checkedPhone.push(_phone);
                    }
                }
            }
            try{
                var childWindow = $(".J_iframe:visible")[0].contentWindow; //表示获取了嵌入在iframe中的子页面的window对象。  []将JQuery对象转成DOM对象，用DOM对象的contentWindow获取子页面window对象。
                childWindow._checkedCallback();
            }catch(e){

            }
        })
		//给多选按钮绑定事件
		$("#open_multi").change(function(e) {
			if (e.target.checked){
				setting.check.chkStyle="checkbox"
				$.fn.zTree.init($("#treeDemo"), setting, _data);
			}else{
				setting.check.chkStyle="radio"
				$.fn.zTree.init($("#treeDemo"), setting, _data);
			}
			_checkedPhone = new Array();
		});
	});

    function refreshTree(){
        $.ajax({
            type : "Post",
            url : '${ctx}/phone/getPhoneTree',
            data:{caseId:caseId},
            dataType : "json",
            success : function(result) {
                _baseData = result.data;
                _data = _baseData;
                $.fn.zTree.init($("#treeDemo"), setting, _data);
                fuzzySearch('treeDemo','#searchPhone',null,true); //初始化模糊搜索方法
            }
        });
	}

    function _zTreeOnCheck(event, treeId, treeNode){
        _checkedPhone = new Array();
        let treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        let not = treeObj.getNodes();
        let notes = treeObj.transformToArray(not).length;
        let checkNode = treeObj.getCheckedNodes().length;
        if(notes == checkNode){
            $('#checkAll').prop('checked', true)
        }else{
            $('#checkAll').prop('checked',false)
        }
        let nodes = treeObj.getCheckedNodes(true);
        for(let i=0;i<nodes.length;i++){
        	if(!nodes[i].children) continue
        	for(let j = 0;j < nodes[i].children.length; j++){
            	let _phone = nodes[i].children[j].name;
                if(_phone && "案件人员信息"!=_phone && _checkedPhone.indexOf(_phone)<0){
                    _checkedPhone.push(_phone);
                }
            }            
        }
        console.log(_checkedPhone)
        try{
            var childWindow = $(".J_iframe:visible")[0].contentWindow; //表示获取了嵌入在iframe中的子页面的window对象。  []将JQuery对象转成DOM对象，用DOM对象的contentWindow获取子页面window对象。
            childWindow._checkedCallback();
        }catch(e){

        }
    }
</script>
<style>
	.account-lefttree{
		border-bottom: 1px solid #DADEE1;
	}
	.phone_treeview_buttonarea i {
		height: 20px;
		width: 22px;
		top: 12px;
		left: 126px;
		margin-left: 10px;
	}
	.account-allqx {
		height: 34px;
		line-height: 40px;
		margin-left: 10px;
		position: relative;
	}

	#searchPhone{
		width: 160px!important;
		height: 24px;
	}
	li{
		position: relative;
	}
	span._nodeTextClass {
		display: inline-block;
		width: 137px;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-right: 10px;
	}
	span.allz {
		margin-left: 7px;
		font-size: 14px;
		position: absolute;
		top: -1px;
		color: #000;
	}
	.treeview span.icon{
		font-size: 13px;
		color: #A3A3A3;
	}
	#edit_b {
		font-size: 16px;
		padding-left: 55px;
		color: #A3A3A3;
		position: absolute;
		top: 8px;
		right: 29px;
	}
	#edit_s {
		font-size: 22px;
		padding-left: 6px;
		position: absolute;
		top: 4px;
		right: 4px;
		color: #A3A3A3;
	}
	.form-control:focus{
		border-color: #4595ec;
	}
	.content{
		background-color: #eef3f7;
	}
	.fl{
		float:left;
	}
	.ml10{
		margin-left:10px;
	}
	.phone_treeview{
		flex:0 0 180px;
		background-color: #E9EDF0;
		height:100%;
		overflow: hidden;
		z-index: 2;
		margin-left: 10px;
	}
	.phone_treeview_scroll{
		overflow-y:auto;
		height:100%;
		float: left;
   		width: 180px;
   		padding-bottom:40px;
	}
	.phone_treeview_buttonarea{
		width:240px;
		height: 40px;
		display: block;
		padding: 10px;
		position: relative;
		z-index: 1;
		margin-top: 0px;
	}
	/*.list-group{*/
	/*margin-top: 40px;*/
	/*}*/
	.phone_treeview_buttonarea input{
		border-radius:4px;
	}
	.phone_treeview_buttonarea i{
		background: url(${ctx}/imgs/searchl.png) no-repeat;
		display: block;
		position: absolute;
		z-index: 99;
		cursor: pointer;
		height: 15px;
		width: 15px;
		top: 15px;
		left: 135px;
	}
	.bg_gray{
		background-color: #edf3f7;
	}
	.box{
		padding:0 15px 10px 15px;
		margin-left: 240px;
	}
	.box-nav{
		font-size: 16px;
		font-family: 微软雅黑;
		color:#9a9899;
		margin-bottom:10px;
	}
	.box-header{
		background-color: #fff;
		color:#6f7689;
		padding-top:0px;
	}
	.box-header .form-group{
		margin-top:10px;
	}
	.box-body{
		background-color: #fff;
		margin-top: 20px;
		min-height:400px;
	}
	.bill-right{
		float: left;
		margin-left:20px;
	}
	.bill-buttonarea .btn{
		height:32px;
		width:80px;
		margin-right:20px;
		font-size:14px;
	}
	.list-group-item{
		border:none;
	}
	.node-treeview-checkable{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.glyphicon-unchecked:before{
		content:"";
		background: url('${ctx}/imgs/unchecked.png') no-repeat top left;
		height: 16px;
		width: 16px;
		position: absolute;
		top: -18px;
	}
	.glyphicon-triangle-right:before {
		content: "\e250";
		position: absolute;
		top: -16px;
	}
	.glyphicon-triangle-bottom:before {
		content: "\e252";
		position: absolute;
		top: -16px;
	}
	.glyphicon-check:before{
		content:"";
		background: url('${ctx}/imgs/checked.png') no-repeat top left;
		height: 16px;
		width: 16px;
		position: absolute;
		top: -18px;
	}
	.glyphicon-chevron-right:before{
		content:"";
		background: url('${ctx}/imgs/right.png') no-repeat top left;
		height: 16px;
		width: 16px;
		position: absolute;
		top: -15px;
	}
	.glyphicon-chevron-down:before{
		content:"";
		background: url('${ctx}/imgs/down.png') no-repeat top left;
		height: 16px;
		width: 16px;
		position: absolute;
		top: -15px;
	}
	.stream_search{
		background: #fff;
		margin: 0 0 30px 0;
		padding-top:25px;
	}
	.stream_body{
		background: #fff;
	}
	.stream_body .title{
		font-size: 14px;
		font-weight:800;
	}
	.ztree *{
		font-size: 14px;
	}
	.ztree li a{
		margin-bottom: 0;
	}
	.ztree li,
	.ztree li a{
	}
		.tree-on{
	    width: 5px;
	    height: 100%;
	    float: right;
	    display: block;
	    background: #fff;
	}
	.tree-on:after{
		content:"";
		width:16px;
		height:50px;
		display: block;
    	position: absolute;
    	top: 50%;
    	cursor:pointer;
    	background-size:100%;
		background:url("${ctx}/imgs/login-imgs/tree-on.png") no-repeat;
	}
	.tree-on:hover::after{
		content:"";
		width:16px;
		height:50px;
		display: block;
		position: absolute;
		top: 50%;
		cursor:pointer;
		background-size:100%;
		background:url("${ctx}/imgs/login-imgs/tree-onh.png") no-repeat;
	}
	.tree-off{
	    width: 5px;
	    height: 100%;
	    float: right;
	    display: block;
	    background: #fff;
	}
	.tree-off:after{
		content:"";
		width:16px;
		height:50px;
		display: block;
    	position: absolute;
    	top: 50%;
    	cursor:pointer;
    	background-size:100%;
		background:url("${ctx}/imgs/login-imgs/tree-off.png") no-repeat;
	}
	.tree-off:hover::after{
		content:"";
		width:16px;
		height:50px;
		display: block;
		position: absolute;
		top: 50%;
		cursor:pointer;
		background-size:100%;
		background:url("${ctx}/imgs/login-imgs/tree-offh.png") no-repeat;
	}
</style>
